function NQueensView(jqElement) {
	this.jqElement = jqElement;
	this.data = [];
}

NQueensView.prototype.init = function(controller) {
	this.controller = controller;
	this.size = controller.size;

	this.initChessBoard();
	this.initButtonPanel();
};

NQueensView.prototype.initChessBoard = function() {
	for ( var row = 0; row < this.size; row++) {
		for ( var col = 0; col < this.size; col++) {
			var squareElem = this.getElementAt(row, col);

			squareElem.click(this.createClickHander(row, col));
		}

	}
};

NQueensView.prototype.createClickHander = function(row, col) {
	var _this = this;

	return function() {
		_this.controller.onPlace(row, col);
	};
};

NQueensView.prototype.initButtonPanel = function() {
	var _this = this;
	$('#resetButton').click(function() {
		_this.reset();
	});

	this.highlightBox = $('#highlight');
	this.highlightBox.change(function() {
		_this.repaint();
	});
};

NQueensView.prototype.isHighlight = function() {
	return this.highlightBox.is(':checked');

};

NQueensView.prototype.reset = function() {
	this.controller.onReset();
};

NQueensView.prototype.repaint = function() {
	this.refresh(this.data);
};

NQueensView.prototype.refresh = function(data) {
	this.data = data;
	for ( var i = 0; i < data.length; i++) {
		var row = Math.floor(i / this.size);
		var col = i % this.size;
		var squareElem = this.getElementAt(row, col);

		squareElem.removeClass('not-allowed-odd');
		squareElem.removeClass('not-allowed-even');
		if (data[i] < 0) {
			squareElem.text('Q');
		} else {
			squareElem.text('');
		}

		if (data[i] != 0 && this.isHighlight()) {
			var cssClass = (squareElem.hasClass('odd')) ? 'not-allowed-odd' : 'not-allowed-even';
			squareElem.addClass(cssClass);
		}

	}
};

NQueensView.prototype.getElementAt = function(row, col) {
	return this.jqElement.find('tr:nth-child(' + (row + 1) + ')').find('td:nth-child(' + (col + 1) + ')');
};

NQueensView.prototype.onSolved = function() {
	alert('Solved');
};

NQueensView.prototype.onStale = function() {
	alert("Stale");
};